<script setup>
    import { ref , watch , computed } from 'vue';

    const props = defineProps({
        yearOrMonthType : Boolean, //根据这个值决定是显示年份还是月份，true是年份，false是月份
        selectedYear : Number,
        selectedMonth : Number,
    });
    
    const months = ref(["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]);
    // const currentDay = ref(new Date());

    const beginYear = computed( () => Math.floor(props.selectedYear / 10) * 10);
    
    const selectedInfo = ref();

    const showInfos = ref([]);

    watch(() => props.selectedYear, () => {  
        getShowInfos();  
    }); 

    function getShowInfos() {
        let res = [];
    
        if (props.yearOrMonthType) {
            for (let index = 0; index < 10; index += 2) {
                res.push([beginYear.value + index,beginYear.value + index + 1]);
            }
        } else {
            for (let index = 0; index < months.value.length; index += 2) {
                res.push(months.value.slice(index,index + 2))
            }
        }
        showInfos.value = res;
    }

    function prevYear() {
        beginYear.value -= 10;
        showInfos.value = getShowInfos();
    }

    function nextYear() {
        beginYear.value += 10;
        showInfos.value = getShowInfos();
    }

    function selectInfo(rowIndex,colIndex) {
        // console.log(rowIndex,colIndex);
        if (props.yearOrMonthType) {
            selectedInfo.value = beginYear.value + 2 * rowIndex + colIndex;
        } else {
            selectedInfo.value = 2 * rowIndex + colIndex;
        }
        // console.log(selectedInfo.value);
        
    }

    getShowInfos();

    

</script>

<template>
    <div>
        <table>
            <tr v-for="(cols,rowIndex) in showInfos" :key="rowIndex">
                <th v-for="(col,colIndex) in cols" :key="colIndex" @click="selectInfo(rowIndex,colIndex)">
                    {{ col }}
                </th>
            </tr>
            <span v-if="yearOrMonthType" @click="prevYear">←</span>
            <span v-if="yearOrMonthType" @click="nextYear">→</span>
        </table>
    </div>
</template>

<style scoped>


</style>